<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {useComponents} from '@/stores/counter'
import { storeToRefs } from 'pinia';
import  {Top,Bottom,DeleteFilled} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
const {canvasComponents}:any=storeToRefs(useComponents())
const {setStyle,DeleteCao}=useComponents()
let targetIndex=-1;
let targetzIndex=-1;
let targetCom=null;
let  targetID='';
let CurrentZindex=0
//开始实现层级 删除 位置
const handleChange=(id:any,type:any)=>{
    let index=canvasComponents.value.findIndex((item, index)=>item.id===id)
    switch(type){
        case 'Top':
            if(index===0){
               ElMessage.error("已经在最上面了！！！");
               return false;
            }
            targetIndex=index-1;
            break;
            case 'Bottom':
                if(index===canvasComponents.value.length-1){
                    ElMessage.error("已经在最下面了！！！");
                    return false;
                }
                targetIndex=index+1;
                break;
                case 'Delete':
                    DeleteCao(id)//调用pina里面的删除函数
                    return false;

    }
    targetCom=canvasComponents.value[targetIndex];
    targetID=targetCom.id;
    let CurrentZindex=canvasComponents.value[index].style.zIndex;
    targetzIndex=targetCom.style.zIndex
    setStyle(targetID,'zIndex',CurrentZindex)
    setStyle(id,'zIndex',targetzIndex)
    canvasComponents.value[targetIndex]=canvasComponents.value[index]
    canvasComponents.value[index]=targetCom
        
    
}
</script>

<template>
    <!-- //实现层级功能    v-for渲染icon-->
  <div class="leftBtn">
    <div class="ieft_icon" v-for="(item, index) in canvasComponents" :key="index">
        <span class="shop"><i :class="item.icon"></i>{{ item.text }}</span>
        <div class="icon_box">
            <el-icon class="emo_Icon" @click="handleChange(item.id,'Top')">
            <Top/>
            </el-icon >
            <el-icon class="emo_Icon"    @click="handleChange(item.id,'Bottom')">
            <Bottom/>
            </el-icon>
              <el-icon  class="emo_Icon"     @click="handleChange(item.id,'Delete')">
            <DeleteFilled/>
            </el-icon>
            
        </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.leftBtn{
    width: 100%;
    height: 100%;
}
.emo_Icon{
     font-weight: normal;
    font-size: large;
     margin-left: 4px
}
.shop{
    font-weight: normal;
    font-size: large;
    margin-left: 4px
}
.left_icon{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items:center;
    border: 2px dashed  pink;

}
.left_icon span{
    margin-left: 10px;
}
.left_icon span i{
    margin-right: 5px;
}
</style>